<template>
  <div class="coupon-wrapper" @click="changeCoupon">
    <div class="top g-flex-sb">
      <div class="top-left g-flex-column-c">
        <div class="money text-weight text-medium">
          <span class="sign">￥</span>
          <span>{{info.couponMoney}}</span>
        </div>
        <div class="tips text-size-13">加油满{{info.couponConditionMoney}}元可用</div>
      </div>
      <div class="top-right g-flex-column-v-center">
        <div class="name text-weight text-size-14 text-line text-medium">{{info.couponTitle}}</div>
        <div class="other">全部油品可用</div>
        <div>{{info.expireDateInterval}}日内有效</div>
      </div>
    </div>
    <div class="bottom g-flex-column-v-center">
      <span class="remark">仅适用于{{gasInfo.gasName}}使用</span>
    </div>
    <div v-if="hasCheck" class="select">
      <img v-show="info.isCheck" src="https://web.newlink.com/ty/merchant/market/coupon-selected-red.png" class="img"/>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  props:{
    info:{
      type: Object,
      default: ()=>({})
    },
    index:[Number,String],
    hasCheck:{
      type: Boolean,
      default: false
    }
  },
  data(){
    return{
      
    }
  },
  computed:{
    ...mapGetters(['gasInfo'])
  },
  created(){
  
  },
  methods:{
    changeCoupon(){
      this.$emit('change',{isCheck:this.info.isCheck,index:this.index})
    }
  }
}
</script>
<style lang="less" scoped>
.coupon-wrapper {
  margin: 5px;
  border-radius: 8px;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.07);
  font-family: PingFangSC-Regular, PingFang SC;
  font-size: 12px;
  position: relative;
  overflow: hidden;
  line-height: 1.25;
  cursor: pointer;
  .top{
    width: 100%;
    height: 75%;
    background: url(https://web.newlink.com/ty/merchant/market/coupon-template-gold.png) no-repeat;
    background-size: 100% 100%;
    color: #A12800;
    .top-left{
      width: 40%;
      height: 100%;
      .money{
        font-size: 28px;
        margin-bottom: 10px;
      }
      .sign{
        font-size: 12px;
        margin-right: 5px;
      }
    }
    .top-right{
      width: 60%;
      height: 100%;
      padding-left: 25px;
      .other{
        margin: 8px 0 5px;
      }
    }
  }
  .bottom{
    height: 25%;
    font-size: 12px;
    color: #333333;
    padding-left: 15px;
    .remark{
      width: 100%;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.06);
    }
  }
  .select{
    width: 51px;
    height: 51px;
    position: absolute;
    top: -2px;
    right: -3px;
    .img{
      width: 100%;
      height: 100%;
    }
  }
  .text-size-13{
    font-size: 12px;
  }
  .text-size-14{
    font-size: 16px;
  }
  .text-weight{
    font-weight: 500;
  }
  .text-medium{
    font-family: PingFangSC-Medium, PingFang SC;
  }
}
</style>